<template>
  <div class="flex items-center justify-between">
    <span class="text-gray-600">{{ label }}:</span>
    <div class="flex space-x-1">
      <button
          @click="startEditing(0)"
          class="bg-blue-100 hover:bg-blue-200 text-gray-800 py-1 px-3 rounded min-w-[100px] w-[100px] text-center cursor-pointer transition duration-200"
      >
        {{
          Array.isArray(mappingValue) ? (mappingValue[0] || '未设置') : mappingValue || '未设置'
        }}
      </button>
      <button
          @click="startEditing(1)"
          class="bg-blue-100 hover:bg-blue-200 text-gray-800 py-1 px-3 rounded min-w-[100px] w-[100px] text-center cursor-pointer transition duration-200"
      >
        {{
          Array.isArray(mappingValue) && mappingValue.length > 1 ? (mappingValue[1] || '未设置') : '未设置'
        }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">import { computed } from 'vue'

const props = defineProps<{
  label: string
  mappingKey: string
  gamepadMapping: Record<string, string | string[]>
}>()

const emit = defineEmits<{
  (e: 'edit', field: string, keyIndex: number): void
}>()

const mappingValue = computed(() => {
  return props.gamepadMapping[props.mappingKey] || []
})

const startEditing = (keyIndex: number) => {
  emit('edit', props.mappingKey, keyIndex)
}
</script>